<!-- 登录流程 -->
<template>
  <div class="loginbody">
    <div class="mode">
      <div
        @click="onMode(item)"
        :class="{ modeBtn: true, actvieModeBtn: item.value === modeBtnValue }"
        v-for="(item, index) in modeList"
        :key="index"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="form">
      <el-form
        require-asterisk-position="right"
        label-position="top"
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        status-icon
      >
        <div v-show="modeBtnValue === '1'">
          <el-form-item style="width: 100%" label="手机号码或邮箱" prop="phone">
            <el-input v-model="ruleForm.phone" placeholder="请输入手机号码或邮箱"></el-input>
          </el-form-item>
          <div class="colY">
            <el-form-item style="width: 100%" label="验证码" prop="phone">
              <el-input v-model="ruleForm.phone" placeholder="验证码"> </el-input>
            </el-form-item>
            <el-button type="primary" class="yanz" @click="onSubmit">获取验证码 </el-button>
          </div>
        </div>
        <div v-show="modeBtnValue === '2'">
          <el-form-item style="width: 100%" label="手机号/邮箱" prop="phone">
            <el-input v-model="ruleForm.phone" placeholder="请输入手机号/邮箱"></el-input>
          </el-form-item>
          <el-form-item style="width: 100%" label="密码" prop="phone">
            <el-input v-model="ruleForm.phone" placeholder="密码"> </el-input>
          </el-form-item>
          <div class="forget">
            <span class="forgetSpan">忘记密码</span>
          </div>
        </div>
        <div v-show="modeBtnValue === '3'">
          <div class="code">
            <div id="wxcode"></div>
            <!-- <div text="https://www.baidu.com" :width="256" :height="256" /> -->
            <div class="wxCodeTest">微信扫码即可完成注册登录</div>
          </div>
        </div>
        <div class="submit" v-if="modeBtnValue === '1' || modeBtnValue === '2'">
          <el-button type="primary" class="submitBtn" @click="onSubmit">登录</el-button>
        </div>
        <div class="agree">
          <el-checkbox v-model="checked2"> </el-checkbox>
          <span class="checkboxSpan" @click="onCheck">我已阅读并同意</span><span></span
          ><span class="xie" @click.stop="onAgreeBook">《用户协议》</span>
        </div>
        <div class="sign">
          <span>没有账号？</span><span></span><span class="onSign" @click.stop="onAgreeBook">立即注册</span>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
// import QrCode from 'qrcodejs2';
import { useNuxtApp } from '#app';
import { ref } from 'vue';
const { $qrcode } = useNuxtApp();
const ruleFormRef = ref(null);
const modeList = [
  {
    name: '验证码登录',
    value: '1',
  },
  {
    name: '密码登录',
    value: '2',
  },
  {
    name: '微信扫码登录',
    value: '3',
  },
];
const modeBtnValue = ref('1');
const checked2 = ref(false);
const ruleForm = ref({
  phone: '',
  password: '',
});
const rules = [];
const onSubmit = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      console.log('submit!');
    } else {
      console.log('error submit!!');
      return false;
    }
  });
};
const onMode = async (item) => {
  modeBtnValue.value = item.value;
  if (item.value === '3') {
    const wxcode = document.getElementById('wxcode');
    if (wxcode) {
      wxcode.innerHTML = '';
      new $qrcode(wxcode, {
        text: 'https://baijiahao.baidu.com/s?id=1806097789624991572',
        width: 180,
        height: 180,
        colorDark: '#000000',
        colorLight: '#ffffff',
      });
    }
  }
};
const onCheck = () => {
  checked2.value = !checked2.value;
};
const onAgreeBook = () => {
  console.log('onAgreeBook');
};
</script>

<style lang="scss" scoped>
.loginbody {
  padding: 25px 40px 40px 40px;
}

.mode {
  display: flex;
  justify-content: center;
  align-items: center;

  .modeBtn {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    padding: 5px 16px;
    cursor: pointer;
  }

  .actvieModeBtn {
    background: #e8f3ff;
    border-radius: 2px 2px 2px 2px;
    color: #165dff;
  }
}

.form {
  margin-top: 20px;

  .colY {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .yanz {
    background: #165dff;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
    padding: 9px 25px;
    margin-left: 8px;
    margin-top: 10px;
  }

  .submitBtn {
    background: #165dff;
    width: 100%;
  }

  .agree {
    display: flex;
    align-items: center;
    margin-top: 20px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    user-select: none;

    .checkboxSpan {
      cursor: pointer;
      margin-left: 8px;
      margin-bottom: 2px;
    }

    .xie {
      margin-bottom: 2px;

      cursor: pointer;
      color: #165dff;
    }
  }

  .sign {
    margin-top: 20px;
    margin-top: 20px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    user-select: none;
    text-align: center;

    .onSign {
      cursor: pointer;
      color: #165dff;
    }
  }

  .forget {
    margin-bottom: 10px;
    text-align: right;

    .forgetSpan {
      cursor: pointer;
      color: #165dff;
    }
  }

  .code {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .wxCodeTest {
      margin-top: 20px;
    }
  }
}

:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
  color: #333333;
}
</style>
